<template>
    <div class="box">
        <div class="rightBox">
            <el-row class="infoBox">
                <el-col class="infoT type" :span="24">维修单号:{{code}}</el-col>
                <el-col class="infoT  title" :span="24">
                    台账名称:{{equiName }}
                </el-col>
                <el-col class="infoT equipment" :span="24">台账编号:{{equiCode}}</el-col>
                <el-col class="infoT time" :span="24">发生时间:{{ occurTime }}</el-col>
                <el-col class="infoT time" :span="24">故障码:{{ experCode }}</el-col>
                <el-col class="infoT time" :span="24">故障等级:{{ urgencyName }}</el-col>
                <el-col class="infoT time" :span="24">维修状态:{{ maintainStatusName }}</el-col>
                <el-col class="infoT time" :span="24">是否停机:{{ isstopName }}</el-col>
                <el-col class="infoT time" :span="24">负责人:{{ submitterName }}</el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>


defineProps({
    code:String,
    equiName:String,
    equiCode:String,
    occurTime:String,
    experCode:String,
    urgencyName:String,
    maintainStatusName:String,
    isstopName:String,
    submitterName:String,

})

</script>

<style lang="less" scoped>
    .box{
        width: 100%;
        height: 200px;
        .leftBox{
            float: left;
            img{
                width: 80px;
                height: 100px;
                margin: 40px 30px;
            }
        }

        .infoBox{
           
            .infoT{
                height: 20px;
                line-height: 20px;
                margin: 0px;
                color: white;
                padding-left: 10px;
             
            }
            .type{
                margin-top: 10px;
                color: #f49057;
            }
            .title{
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .equipment{
                color: #c2c2c2;
            }

            .time{
                color: rgba(155, 155, 155, 0.836);
            }
        }

        .icon{
            position: absolute;
            top: 3%;
            right: 3%;
            z-index: 10;
            background: linear-gradient(0deg,#30eb6e 0%, #70d7f1 100%);
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            padding: 1px 5px;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
        }
        .icon2{
            background: linear-gradient(0deg,#f76943 0%, #f1bf70 100%) !important;
        }
        
    }


</style>